<template>
  <div class="mod-config">
    <div class="c--header" >
        <div>
          <el-button
          v-if="permissionList.addBtn"
          icon="el-icon-plus"
          type="primary"
          size="small"
          @click="addOrUpdateHandle()"
          >新增</el-button
        >
        </div>
        <div class="h--search">
          <el-input size="small" v-model="carNumber" placeholder="请输入车牌号查询"></el-input>
          <el-button size="small" type="primary" @click="getDataList" >查询</el-button>
          <el-button size="small" @click="(carNumber = '') || getDataList()">重置</el-button>
        </div>
        
    </div>

    <div class="avue-crud">
      <el-table :data="dataList" border v-loading="dataListLoading" stripe >
        <el-table-column
          prop="terminalId"
          header-align="center"
          align="center"
          label="终端ID"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="vincode"
          header-align="center"
          align="center"
          label="VIN码"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="engineCode"
          header-align="center"
          align="center"
          label="发动机号"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="chassisCode"
          header-align="center"
          align="center"
          label="车架号"
        >
        </el-table-column> -->
        <el-table-column
          prop="productType"
          header-align="center"
          align="center"
          label="车辆品牌"
        >
        </el-table-column>
        <el-table-column
          prop="modelType"
          header-align="center"
          align="center"
          label="车辆型号"
        >
        </el-table-column>
        <el-table-column
          prop="carNumber"
          header-align="center"
          align="center"
          label="车牌号"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="productDate"
          header-align="center"
          align="center"
          label="生产日期"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="buyDate"
          header-align="center"
          align="center"
          label="购买日期"
        >
        </el-table-column> -->
        <el-table-column
          prop="workdatatime"
          header-align="center"
          align="center"
          label="工况时间"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="lng"
          header-align="center"
          align="center"
          label="经度"
        >
        </el-table-column>
        <el-table-column
          prop="lat"
          header-align="center"
          align="center"
          label="纬度"
        >
        </el-table-column> -->
        <el-table-column
          prop="speed"
          header-align="center"
          align="center"
          label="速度(公里/小时)"
        >
        </el-table-column>
        <el-table-column
          prop="totalenginefuel"
          header-align="center"
          align="center"
          label="累计油耗(L)"
        >
        </el-table-column>
        <el-table-column
          prop="totalenginehours"
          header-align="center"
          align="center"
          label="累计工时(小时)"
        >
        </el-table-column>
        <el-table-column
          prop="totalmileage"
          header-align="center"
          align="center"
          label="累计里程(公里)"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="engineoilpressure"
          header-align="center"
          align="center"
          label="机油压力(KPa)"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="enginewatertemperature"
          header-align="center"
          align="center"
          label="发动机水温(度)"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="enginespeed"
          header-align="center"
          align="center"
          label="发动机转速(转/分钟)"
        >
        </el-table-column> -->
        <el-table-column
          prop="onlinestate"
          header-align="center"
          align="center"
          label="在线状态(1在线0离线)"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="createtime"
          header-align="center"
          align="center"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="updatetime"
          header-align="center"
          align="center"
          label="更新时间"
        >
        </el-table-column> -->
        <el-table-column header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="permissionList.editBtn"
              type="text"
              size="small"
              icon="el-icon-edit"
              @click="addOrUpdateHandle(scope.row.terminalId)"
              >修改</el-button
            >
            <el-button
              v-if="permissionList.delBtn"
              type="text"
              size="small"
              icon="el-icon-delete"
              @click="deleteHandle(scope.row.terminalId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <table-form
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></table-form>
  </div>
</template>

<script>
import { fetchList, delObj } from "@/api/dbdvehicle";
import TableForm from "./dbdvehicle-form";
// import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      dataForm: {
        key: "",
      },
      carNumber:"",
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      timeHandle:undefined,
    };
  },
  components: {
    TableForm,
  },
  created() {
    this.getDataList();
  },
  computed: {
    // ...mapGetters(['permissions'])
    permissionList() {
      return {
        addBtn: true,
        editBtn: true,
        delBtn: true,
        viewBtn: true,
      };
    },
  },
  methods: {
    // 获取数据列表
    async getDataList(loading = true) {
      this.dataListLoading = !!loading;
      try {
        const c = this.carNumber;
        const q = c !== '' ? {carNumber:c} : {}
        const data = await fetchList(
          Object.assign({ current: this.pageIndex, size: this.pageSize },q)
        );
        const res = data.data;
        //
        this.dataList = res.result.records;
        this.totalPage = res.result.total;
        //
        this.$emit('refresh-panel')
      } catch (e) {
        console.log(e);
      }
      this.dataListLoading = false;
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除ID为" + id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(id);
        })
        .then(() => {
          this.$message.success("删除成功");
          this.getDataList();
        });
    },
  },
  mounted(){
    if(!this.timeHandle){
      this.timeHandle = setInterval(() => {
        this.getDataList(false);
      },5000)
    }
  },
  beforeDestroy(){
    if(this.timeHandle){
      window.clearInterval(this.timeHandle)
    }
  },

};
</script>


<style scoped lang="scss">
  .mod-config{
    text-align: left;
    padding:0 24px;
    .c--header{
      display:flex;
      justify-content: space-between;
      align-items:center;
      margin-bottom:10px;
      .h--search{
        display:flex;
        align-items:center;
        .el-input{
          margin-right:2em;
        }
      }
    }
    .avue-crud{
      
    }
    .avue-crud__pagination{
      margin-top:10px;
      text-align: right;
    }
  }
</style>
